class Compiler {
    constructor(vm){
        this.el=vm.$el
        this.vm=vm
        this.compiler(this.el)
    }
    //处理文本节点和元素节点
    compiler(el){
        const childNodes =  el.childNodes;
        Array.from(childNodes).forEach(node => {
            //处理文本节点
            if(this.isTextNode(node)){
                this.compilerText(node)
            }else if (this.isElementNode(node)){
                //处理元素节点
                this.compilerElement(node)
            }
            //判断node是否含有子节点，若果有子节点则递归调用compiler
            if(node.childNodes && node.childNodes.length){
                this.compiler(node);
            }
        })
    }

    //编译元素节点，处理指令
    compilerElement(node){
        //遍历所有的属性节点
        Array.from(node.attributes).forEach(attr=>{
            //判断是否是指令
            let attrName =attr.name;
            if(this.isDirective(attrName)){
                //转化v指令  v-text --》 text
                attrName =attrName.substr(2);
                let key=attr.value;
                this.update(node,key,attrName)
            }
        })
    }

    update(node,key,attrName){
        let updateFn =this[`${attrName}Updater`];
        updateFn && updateFn()
    }
    //处理v-text指令
    textUpdater(node,value){
        node.textContent=value;
    }
    //处理v-modal
    modalUpdater(node,value){
        node.value = value;
    }
    //编译文本节点，处理插值表达式
    compilerText(node){
        // console.dir(node)
        let reg = /\{\{(.+?)\}\}/
        let value =node.textContent;
        if(reg.test(value)){
            let key = RegExp.$1.trim()
            node.textContent = value.replace(reg,this.vm[key])
        }
    }
    //判断元素属性是否是指令
    isDirective(attrName){
        return attrName.startWith('v-')
    }
    //判断节点是否是文本节点
    isTextNode(node){
        return node.nodeType === 3
    }
    //判断节点是否是元素节点
    isElementNode(node){
        return node.nodeType === 1
    }
}